<template>
  <section class="easy-pagination">
    <span class="item" @click="preClick">上一页</span>
    <span v-for="(item, index) in numArray" :key="index" :class="item === activeNum ? 'item num actived' : 'item num'" @click="numClick(item)">{{item}}</span>
    <span class="item" @click="nextClick">下一页</span>
  </section>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  props: {
    total: {
      type: Number,
      default: 5
    }
  },
  computed: {
    numArray() {
      let result = [];
      for (let i = 0; i < this.total; i++) {
        result.push(i + 1);
      }
      return result;
    },
    pageNumber() {
      return this.$store.state.pagination.pageNumber;
    }
  },
  data () {
      return {
        activeNum: 1
      }
  },
  mounted() {
  
  },
  methods: {
    ...mapActions(['actionPageNumber']),
    // 上一页
    preClick() {
      const target = this.activeNum - 1;
      if (target <= 0) return;
      this.numClick(target);
    },
    // 点击页码
    numClick(pageNumber) {
      if (this.activeNum === pageNumber) return;
      this.activeNum = pageNumber;
      this.actionPageNumber(pageNumber);
    },
    // 下一页
    nextClick() {
      const target = this.activeNum + 1;
      if (target >= this.total + 1) return;
      this.numClick(target);
    }
  },
  watch: {
    pageNumber(val, oldVal) {
      this.activeNum = val;
    }
  }
}
</script>
<style lang='less' scoped>
  .easy-pagination {
    .item {
      font-size: 1.5rem;
      margin-left: 1.2rem;
      cursor: pointer;
      &:hover {
        color: #409EFF !important;
      }
    }
    .num {
      padding: 0 .5rem;
    }
    .actived {
      color: #409EFF !important;
    }
  }
</style>
